<template>
  <div class="c_income">
    <div class="head">
      <div class="h-head">
        <div class="left" @click="$router.back(-1)">
          <img src="../../assets/left.png" alt />
        </div>
        <div class="right">云算力收益</div>
      </div>
      <div class="tt1">
        <span>
          <span style="font-size:24px">0.34234234</span> &nbsp;BTC
        </span>
        <span>1T</span>
      </div>
      <div class="tt2">
        <span>总收益≈0 USDT</span>
        <span>持有算力</span>
      </div>
    </div>
    <div id="myChart" :style="{width: '8.426667rem', height: '4.8rem'}"></div>
    <div class="t_center">
      <p>收益列表</p>
      <span style="font-size:.4rem">
        全网算力：
        <span style="font-weight:bold!important">12345678901226.00</span>
      </span>
    </div>
    <div id="content">
      <mt-loadmore
        :bottom-method="loadBottom"
        :bottom-all-loaded="allLoaded"
        :bottomPullText="bottomText"
        :auto-fill="false"
        ref="loadmore"
      >
        <div class="income_block" @click="goTo">
          <div class="cxk1">
            <p class="hh1" style="font-size:14px">BTC-S15&nbsp;云算力&nbsp;即买即挖</p>
            <div class="ztm">未开始</div>
            <p class="hh3" style="color:#d5d5d5">
              2019-10-12
              <br />11:14:00
            </p>
          </div>
          <div class="cxk2">
            <span class="hh1 f_weight">0.123456&nbsp;BTC</span>
            <span class="hh2 f_weight">IT</span>
            <span class="f_weight hh3">永续</span>
          </div>
          <div class="cxk3">
            <span class="hh1 g_color">昨日净收益</span>
            <span class="hh2 g_color">算力</span>
            <span class="g_color hh3">算力周期</span>
          </div>
        </div>
        <div class="income_block" @click="goTo">
          <div class="cxk1">
            <p class="hh1" style="font-size:14px">BTC-S15&nbsp;云算力&nbsp;即买即挖</p>
            <div class="ztm">未开始</div>
            <p class="hh3" style="color:#d5d5d5">
              2019-10-12
              <br />11:14:00
            </p>
          </div>
          <div class="cxk2">
            <span class="hh1 f_weight">0.123456&nbsp;BTC</span>
            <span class="hh2 f_weight">IT</span>
            <span class="f_weight hh3">永续</span>
          </div>
          <div class="cxk3">
            <span class="hh1 g_color">昨日净收益</span>
            <span class="hh2 g_color">算力</span>
            <span class="g_color hh3">算力周期</span>
          </div>
        </div>
        <div class="income_block" @click="goTo">
          <div class="cxk1">
            <p class="hh1" style="font-size:14px">BTC-S15&nbsp;云算力&nbsp;即买即挖</p>
            <div class="ztm">未开始</div>
            <p class="hh3" style="color:#d5d5d5">
              2019-10-12
              <br />11:14:00
            </p>
          </div>
          <div class="cxk2">
            <span class="hh1 f_weight">0.123456&nbsp;BTC</span>
            <span class="hh2 f_weight">IT</span>
            <span class="f_weight hh3">永续</span>
          </div>
          <div class="cxk3">
            <span class="hh1 g_color">昨日净收益</span>
            <span class="hh2 g_color">算力</span>
            <span class="g_color hh3">算力周期</span>
          </div>
        </div>
      </mt-loadmore>
    </div>
  </div>
</template>

<script>
// 引入基本模板
let echarts = require("echarts/lib/echarts");
// 引入柱状图组件
require("echarts/lib/chart/line");
// 引入提示框和title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
import { Loadmore } from "mint-ui";
var p = 10;
export default {
  data() {
    return {
      list: [],
      pageNo: 1,
      allLoaded: false,
      bottomText: "上拉加载更多...",
      totalCount: ""
    };
  },

  created: function() {},
  mounted() {
    this.drawLine();
  },
  computed: {
    options() {
      return {};
    }
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        backgroundColor: "#fff",
        tooltip: {},
        xAxis: {
          type: "category",
          data: ["10-11", "10-12", "10-13", "10-14", "10-15"],
          axisTick: {
            //y轴刻度线
            show: false
          }
        },
        grid: {
          x: "8%",
          y: "8%",
          x2: "8%",
          y2: "11%",
          backgroundColor: "rgba(0,0,0,0)",
          borderWidth: 1,
          borderColor: "#999"
        },
        yAxis: [
          {
            axisTick: {
              //y轴刻度线
              show: false
            }
          }
        ],
        series: [
          {
            name: "BTC",
            type: "line",
            data: [5, 20, 36, 10, 10, 20],
            smooth: true,
            itemStyle: {
              normal: {
                lineStyle: {
                  color: "#546CE3"
                }
              }
            }
          }
        ]
      });
    },
    goTo() {
      this.$router.push("/income");
    },
    //初始化数据
    //  getData(){
    //       this.$axios.post("/", {
    //         params
    //       }).then(res => {
    //         if (res.data.errcode == 0) {
    //           this.getScoreLog = res.data.scoreLog;
    //           this.totalGetCount = (res.data.recordCount + 9) / 10;
    //         }
    //       }, res => {
    //       });
    //     },
    loadBottom() {
      this.pageNo += 1;
      // if (this.pageNo == this.totalGetCount) {
      // this.allLoaded = true;
      console.log('1');
      // }
      // setTimeout(() => {
      //   this.$axios
      //     .post("/restful", {
      //       pageNo: this.pageNo,
      //       typeFlag: "1"
      //     })
      //     .then(
      //       res => {
      //         if (res.data.errcode == 0) {
      //           this.list = this.getScoreLog.concat(
      //             res.data.scoreLog
      //           );
      //         }
      //       },
      //       res => {}
      //     );
      // }, 1500);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.f-flex {
  display: flex;
  display: -webkit-flex;
  align-items: center;
}
#myChart {
  margin: auto;
  margin-top: -10%;
  border-radius: 0.266667rem;
  overflow: hidden;
}
#content {
  overflow: scroll;
}
.hh1 {
  width: 50%;
  text-align: left;
}
.hh2 {
  width: 20%;
  text-align: center;
  margin: auto;
}
.hh3 {
  width: 30%;
  text-align: right;
}
.c_income {
  .head {
    color: #fefeff;
    height: 5.146667rem;
    width: 100%;
    background: url(../../assets/b_blue.jpg) no-repeat;
    background-size: cover;
  }
  .h-head {
    color: #fefeff;
    width: 100%;
    height: 2.133333rem;
    .f-flex();
    justify-content: space-between;
    .left {
      position: absolute;
      left: 0.346667rem;
      .f-flex();
      font-size: 0.64rem;
      img {
        width: 0.293333rem;
        height: 0.48rem;
        margin-right: 0.266667rem;
      }
    }
    .right {
      font-size: 0.48rem;
      width: 100%;
      font-weight: bold;
      text-align: center;
    }
  }
  .tt1 {
    .f-flex();
    justify-content: space-between;
    margin-left: 0.346667rem;
    margin-right: 0.346667rem;
    font-size: 0.533333rem;
  }
  .tt2 {
    .f-flex();
    justify-content: space-between;
    margin-left: 0.346667rem;
    margin-right: 0.346667rem;
    margin-top: 0.206667rem;
  }
  .t_center {
    .f-flex();
    padding-left: 0.346667rem;
    margin-right: 0.346667rem;
    margin-top: 0.533333rem;
    padding-bottom: 0.533333rem;
    justify-content: space-between;
    border-bottom: 1px solid #e2e2e2;
    margin-bottom: 0.4rem;
    p {
      color: #474747;
      font-size: 0.48rem;
      font-weight: bold !important;
    }
    span {
      color: #474747;
    }
  }
  .income_block {
    width: 8.6rem;
    background: #fff;
    margin: auto;
    margin-bottom: 0.4rem;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    border-radius: 0.1rem;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
  }
  .cxk1,
  .cxk2,
  .cxk3 {
    .f-flex();
    justify-content: space-between;
    color: #474747;
  }
  .cxk2 {
    font-size: 0.4rem;
    margin-top: 0.453333rem;
    margin-bottom: 0.213333rem;
  }
  .ztm {
    width: 1.493333rem;
    height: 0.453333rem;
    background: #546ce3;
    border-radius: 0.4rem;
    text-align: center;
    line-height: 0.453333rem;
    color: #fff;
  }
  .hh2 {
    text-align: center;
  }
}
</style>